<script lang="ts">
  import {
    Table,
    TableBody,
    TableBodyCell,
    TableBodyRow,
    TableHead,
    TableHeadCell,
    Tabs,
    TabItem,
    Checkbox,
    Input,
    uiHelpers,
  } from 'svelte-5-ui-lib'
  import { CloseCircleOutline } from 'flowbite-svelte-icons'
  import CodeEditor from '$lib/components/EditorComponents/CodeEditor.svelte'
  import { ListCircleOutlineIon, SkullOutlineIon } from 'svelte-animated-icons'
  import { updateData, requestStore } from '$lib/utils/stores.svelte'
  import KeyValueTable from '$lib/utils/tableData.svelte'
  import DrawerBox from '$lib/components/DrawerBox.svelte'
  import { rawTypes } from '$lib/const'
  let formDatas = new KeyValueTable()
  let bodyType = $state('raw')
  let rawType = $state('json')
  let selectedFiles: FileList | undefined = $state()
  let fileNames = $derived(selectedFiles ? Array.from(selectedFiles).map((file) => file.name).join(', ') : 'No files selected')
  let rawText: any = $state(Object.keys($requestStore.data).length === 0 ? '' : JSON.stringify($requestStore.data, null, 2))
  $effect(() => { try { updateData(JSON.parse(rawText)) } catch (err) { updateData({}) } })
  const uihelpers = uiHelpers()
</script>
<Tabs tabStyle="underline">
  <TabItem onclick={() => (bodyType = 'form-data')}>
    {#snippet titleSlot()}
      <div class="flex items-center gap-2">
        <ListCircleOutlineIon size={24} />
        form-data
      </div>
    {/snippet}
    <Table divClass="m-0 max-h-60 overflow-y-auto rounded-xl shadow-md bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-700 transition-all duration-200">
      <TableHead class="text-md sticky top-0 bg-gray-50 dark:bg-zinc-800 text-gray-500">
        <TableHeadCell class="w-4"></TableHeadCell>
        <TableHeadCell>键</TableHeadCell>
        <TableHeadCell>值</TableHeadCell>
        <TableHeadCell class="w-4"></TableHeadCell>
      </TableHead>
      <TableBody class="divide-y">
        {#each formDatas.rows as row, i (row.id)}
          <TableBodyRow class="border-none rounded-lg hover:shadow-lg transition-all duration-150">
            <TableBodyCell class="!p-4">
              <Checkbox checked={row.valid} />
            </TableBodyCell>
            <TableBodyCell>
              <Input class="border-white text-orange-700 focus:text-gray-700 dark:text-orange-500 min-h-8 focus:bg-gray-50 focus:outline focus:outline-primary-500 rounded-md shadow-sm transition-all duration-150" placeholder="Key" bind:value={row.key} onblur={() => { formDatas.handleBlur(i); updateData(formDatas.keyValueObject) }} size="sm" />
            </TableBodyCell>
            <TableBodyCell>
              <Input size="sm" placeholder="Value" bind:value={row.value} onblur={() => { formDatas.handleBlur(i); updateData(formDatas.keyValueObject) }} class="border-white text-orange-700 focus:text-gray-700 dark:text-orange-500 min-h-8 focus:bg-gray-50 focus:outline focus:outline-primary-500 rounded-md shadow-sm transition-all duration-150" />
            </TableBodyCell>
            <TableBodyCell>
              <CloseCircleOutline class="w-4 h-4 text-gray-400 hover:text-orange-600 transition-colors duration-150" onclick={() => { formDatas.removeRow(row.id); updateData(formDatas.keyValueObject) }} />
            </TableBodyCell>
          </TableBodyRow>
        {/each}
      </TableBody>
    </Table>
  </TabItem>
  <TabItem open onclick={() => (bodyType = 'raw')}>
    {#snippet titleSlot()}
      <div class="flex items-center gap-2">
        <SkullOutlineIon size={24} />
        raw
      </div>
    {/snippet}
    <div class="p-0">
      <CodeEditor {uihelpers} lang={rawType} bind:rawText />
    </div>
  </TabItem>
  <TabItem tabStyle="none" hidden={!(bodyType === 'raw')}>
    {#snippet titleSlot()}
      <select id="countries" class="!text-sm bg-none border-none !bg-transparent hover:text-orange-600 hover:font-bold" style="background-image: none;" bind:value={rawType} placeholder="">
        {#each rawTypes as raw, i}
          <option selected={!(raw?.selected ?? false)} value={raw.rawType}>{raw.rawType}</option>
        {/each}
      </select>
    {/snippet}
  </TabItem>
</Tabs>
<DrawerBox {uihelpers} bind:rawText />